<template>
	<view class="container">
		<view class="title">
			<uni-icons @click="Back()" type="back" size="26"></uni-icons>
		</view>
		<view class="textInfo">
			绑定新手机号
			<view class="">
				请绑定一个未注册的手机号
			</view>
		</view>
		<view class="form">
			<view class="formBtm">
				<uni-forms :modelValue="formData" ref="form" :rules="rules" label-width="120" label-position="top">
					<uni-forms-item label="手机号" name="mobile">
						<uni-easyinput type="text" v-model="formData.mobile" :clearable='false' placeholder="请输入您的手机号" />
					</uni-forms-item>

					<uni-forms-item label="验证码" name="code">
						<view class="inputBoxRight">
							<uni-easyinput type="text" :clearable='false' v-model="formData.code" placeholder="请输入" />
							<text class="right">| <text class="yzm"
									@click="startCountDown()">{{countdown==60?'获取验证码':countdown}}</text>
							</text>
						</view>
					</uni-forms-item>
				</uni-forms>


				<view class="btn" @click="loginMobile('form')">
					确认
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				formData: {
					radio: false,
					mobile: "",
					code: ""
				},
				countdown: 60,
				rules: {
					mobile: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {

								let iphoneReg = (
									/^1[3-9]\d{9}$/
								);
								if (!iphoneReg.test(value)) {
									callback('手机号格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					},
				}
			}
		},
		methods: {
			startCountDown() {
				if (this.countdown == 60) {
					this.getSendSMSCode()
					let timer = setInterval(() => {
						if (this.countdown > 1) {
							this.countdown--;
						} else {
							clearInterval(timer);
							// 清除定时器
							this.countdown = 60
						}
					}, 1000);
				}
			},
			getSendSMSCode() {
				sendSmsCode({
					mobile: this.formData.mobile,
					scene: "1"
				}).then(res => {

				});
			},
			loginMobile(ref) {
				var that = this
				this.$refs[ref].validate().then(res => {
					updateMobile(this.formData).then(res => {
						if(res.code==0){
							uni.removeStorageSync("token")
							uni.showToast({
								title: '手机号更换成功，即将跳转登录页重新登录',
								icon: 'none',
								duration: 2000,
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 2000)
						}
					});

				}).catch(err => {
					console.log('err', err);
				})

			},
			Back() {
				//uni.navigateBack()//默认delta:1
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			goinfo(e, id) {
				if (id) {
					uni.navigateTo({
						url: `/${e}?id=${id}`
					})
				} else {
					uni.navigateTo({
						url: `/${e}`
					})
				}
			},
			switchTab() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background-size: 100% 602rpx;
		background-repeat: no-repeat;
		min-height: 100vh;
		padding: 60rpx 30rpx 0;
		box-sizing: border-box;
		/deep/.uni-forms-item{
			align-items: flex-start;
		}

		.textInfo {
			font-weight: 800;
			font-size: 40rpx;
			color: #333333;
			text-align: center;
			margin: 58rpx auto 50rpx;
			width: 100%;

			view {
				font-weight: 500;
				font-size: 26rpx;
				margin: 25rpx 35rpx;
			}
		}

		.inputBoxRight {
			position: relative;
			margin-bottom: 24rpx;

			.right {
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
				font-size: 30rpx;
				color: #999999;

				.yzm {
					display: inline-block;
					width: 150rpx;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #7B66FE;
				}
			}

			/deep/.uni-input-wrapper {
				padding-left: 10rpx;
				box-sizing: border-box;
			}

			/deep/.uni-input-placeholder {
				left: 10rpx;
			}

		}

		.loginWx {
			margin-top: 40rpx;
			text-align: center;

			image {
				width: 59rpx;
				height: 59rpx;
			}
		}

		.report {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;

			.xian {
				width: 209rpx;
				height: 4rpx;
				background-color: #EEEEEE;
			}
		}

		.business {
			font-size: 28rpx;
			font-weight: bold;
			text-decoration: underline;
			color: #7B66FE;
			line-height: 28rpx;
			text-align: center;
			margin: 24rpx 0 35rpx;
		}

		.title {
			font-size: 50rpx;
			font-weight: bold;
			color: #FFFFFF;

			&>view {
				view {
					margin-top: 17rpx;
					font-size: 26rpx;
					font-weight: 500;
				}
			}
		}



		.form {
			width: 690rpx;
			min-height: 553rpx;
			margin-top: 69rpx;
			margin-bottom: 25rpx;
			border-radius: 20rpx;

			.formTop {
				width: 300rpx;
				height: 107rpx;
				line-height: 107rpx;
				padding-left: 19rpx;
				box-sizing: border-box;
				font-size: 34rpx;
				font-weight: bold;
				text-align: center;
				color: #333333;
				border-radius: 20rpx 20rpx 0 0;
			}

			.formBtm {
				padding: 30rpx 74rpx;
				box-sizing: border-box;
				border-radius: 0 20rpx 20rpx 20rpx;

				.agreement {
					margin-top: 27rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #999999;

					line-height: 30rpx;

					/deep/.uni-radio-input {
						width: 22rpx;
						height: 22rpx;
					}

				}

				.btn {
					width: 545rpx;
					height: 90rpx;
					background: linear-gradient(103deg, #DB88FC 0%, #7B66FE 100%);
					box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(42, 41, 48, 0.35);
					border-radius: 45rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 79rpx;
					text-align: center;
					margin-top: 65rpx;
				}

				/deep/.uni-forms-item__label {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				/deep/.uni-easyinput__content {
					width: 546rpx;
					height: 91rpx;
					background: #Fff !important;
					border-radius: 46rpx;
					font-size: 24rpx
				}
			}
		}
	}
</style>